<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="renderer" content="webkit|ie-comp|ie-stand">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <title>人员分析</title>
  <script src="../../../static/kaige/js/szload.js"></script>
  <style>
    .analyse_echarts {
      width: 800px;
      height: 600px;
    }

    .pagebox {
      padding: 15px;
      overflow-x: hidden;
    }
  </style>
</head>

<body>
  <div class="layui-form pagebox">
    <div class="layui-row layui-col-space10">
      <div class="layui-col-md5">
        <div class="layui-form-item">
          <div class="layui-input-inline">
            <select name="analtype" lay-filter="analtype">
              <option value=""></option>
              <option value="1">部门</option>
              <option value="2">性别</option>
              <option value="3">年龄</option>
              <option value="4">学历</option>
              <option value="5">职位</option>
              <option value="6">入职年份</option>
              <option value="7">入职年限</option>
            </select>
          </div>
        </div>
        <table class="layui-hide" id="pageTable" lay-filter="pageTable"></table>
      </div>
      <div class="layui-col-md7">
        <div class="analyse_echarts" id="analyse_echarts"></div>
      </div>
    </div>
  </div>
  <script>
    load_init_js(function () {
      layui.config({
        base: szoapcpath + '/static/kaige/layuiextend/'
      }).extend({
        echarts: 'echarts/echarts',
        echartsTheme: 'echarts/echartsTheme',
      }).use(['element', 'table', 'kaige', 'echarts', 'echartsTheme', 'form'], function () {
        var $ = layui.$, table = layui.table, kaige = layui.kaige, element = layui.element,
          echarts = layui.echarts, echartsTheme = layui.echartsTheme, form = layui.form;

        form.on('select(analtype)', function (data) {
          chart(data.elem[data.value].innerHTML,data.value / 1);
        });
        function chart(title,dn) {
          $.ajax({
            url: '/hrm.employee/analyse',
            data: { analtype: dn },
            success: function (res) {
              var op = {};
              op.sname = title;
              op.title = '按' + title + '分析';
              op.ldata = [];
              op.sdata = [];
              op.table = [];
              switch (dn) {
                case 1:
                  $.each(res.data, function (index, item) {
                    op.ldata.push(item.dept_id_name);
                    op.sdata.push({
                      value: item.num,
                      name: item.dept_id_name
                    });
                    op.table.push({
                      name: item.dept_id_name,
                      num: item.num,
                      bfb: (item.num / res.count * 100).toFixed(2),
                    });
                  });
                  //展示已知数据
                  table.render({
                    elem: '#pageTable'
                    , totalRow: true
                    , limit: 99999
                    , cols: [[
                      { type: 'numbers', title: '序号' }
                      , { field: 'name', title: '部门', totalRowText: '人数合计' }
                      , { field: 'num', title: '人数', totalRow: '{{= parseInt(d.TOTAL_NUMS) }}' }
                      , { field: 'bfb', title: '占比(%)' }
                    ]]
                    , data: op.table ? op.table : []
                  });
                  break;
                case 2:
                  $.each(res.data, function (index, item) {
                    var sexn = item.sex == 1 ? '男' : item.sex == 2 ? '女' : '未知';
                    op.ldata.push(sexn);
                    op.sdata.push({
                      value: item.num,
                      name: sexn
                    });
                    op.table.push({
                      name: sexn,
                      num: item.num,
                      bfb: (item.num / res.count * 100).toFixed(2),
                    });
                  });
                  table.render({
                    elem: '#pageTable'
                    , totalRow: true
                    , cols: [[
                      { type: 'numbers', title: '序号' }
                      , { field: 'name', title: '性别', totalRowText: '人数合计' }
                      , { field: 'num', title: '人数', totalRow: '{{= parseInt(d.TOTAL_NUMS) }}' }
                      , { field: 'bfb', title: '占比(%)' }
                    ]]
                    , data: op.table ? op.table : []
                  });
                  break;
                case 3:
                  op.ldata = ['20岁以下', '20-34岁', '35-49岁', '50岁以上'];
                  var tnum = [0, 0, 0, 0];
                  $.each(res.data, function (index, item) {
                    if (item.age < 20) {
                      tnum[0] += item.num;
                    } else if (item.age >= 20 && item.age < 35) {
                      tnum[1] += item.num;
                    } else if (item.age >= 35 && item.age < 50) {
                      tnum[2] += item.num;
                    } else if (item.age >= 50) {
                      tnum[3] += item.num;
                    }
                  });
                  $.each(op.ldata, function (i2, e2) {
                    op.sdata.push({ value: tnum[i2], name: e2 });
                    op.table.push({
                      name: e2,
                      num: tnum[i2],
                      bfb: (tnum[i2] / res.count * 100).toFixed(2),
                    });
                  });
                  table.render({
                    elem: '#pageTable'
                    , totalRow: true
                    , cols: [[
                      { type: 'numbers', title: '序号' }
                      , { field: 'name', title: '年龄段', totalRowText: '人数合计' }
                      , { field: 'num', title: '人数', totalRow: '{{= parseInt(d.TOTAL_NUMS) }}' }
                      , { field: 'bfb', title: '占比(%)' }
                    ]]
                    , data: op.table ? op.table : []
                  });
                  break;
                case 4:
                  $.each(res.data, function (index, item) {
                    op.ldata.push(item.educational);
                    op.sdata.push({
                      value: item.num,
                      name: item.educational
                    });
                    op.table.push({
                      name: item.educational,
                      num: item.num,
                      bfb: (item.num / res.count * 100).toFixed(2),
                    });
                  });
                  //展示已知数据
                  table.render({
                    elem: '#pageTable'
                    , totalRow: true
                    , limit: 99999
                    , cols: [[
                      { type: 'numbers', title: '序号' }
                      , { field: 'name', title: '学历', totalRowText: '人数合计' }
                      , { field: 'num', title: '人数', totalRow: '{{= parseInt(d.TOTAL_NUMS) }}' }
                      , { field: 'bfb', title: '占比(%)' }
                    ]]
                    , data: op.table ? op.table : []
                  });
                  break;
                case 5:
                  $.each(res.data, function (index, item) {
                    op.ldata.push(item.ranking_id_name);
                    op.sdata.push({
                      value: item.num,
                      name: item.ranking_id_name
                    });
                    op.table.push({
                      name: item.ranking_id_name,
                      num: item.num,
                      bfb: (item.num / res.count * 100).toFixed(2),
                    });
                  });
                  //展示已知数据
                  table.render({
                    elem: '#pageTable'
                    , totalRow: true
                    , limit: 99999
                    , cols: [[
                      { type: 'numbers', title: '序号' }
                      , { field: 'name', title: '职位', totalRowText: '人数合计' }
                      , { field: 'num', title: '人数', totalRow: '{{= parseInt(d.TOTAL_NUMS) }}' }
                      , { field: 'bfb', title: '占比(%)' }
                    ]]
                    , data: op.table ? op.table : []
                  });
                  break;
                case 6:
                  $.each(res.data, function (index, item) {
                    op.ldata.push(item.uyear);
                    op.sdata.push({
                      value: item.num,
                      name: item.uyear
                    });
                    op.table.push({
                      name: item.uyear,
                      num: item.num,
                      bfb: (item.num / res.count * 100).toFixed(2),
                    });
                  });
                  //展示已知数据
                  table.render({
                    elem: '#pageTable'
                    , totalRow: true
                    , limit: 99999
                    , cols: [[
                      { type: 'numbers', title: '序号' }
                      , { field: 'name', title: '入职年份', totalRowText: '人数合计' }
                      , { field: 'num', title: '人数', totalRow: '{{= parseInt(d.TOTAL_NUMS) }}' }
                      , { field: 'bfb', title: '占比(%)' }
                    ]]
                    , data: op.table ? op.table : []
                  });
                  break;
                case 7:
                  op.ldata = ['1年以下', '1-3年', '3-5年', '5-10年', '10年以上'];
                  var tnum = [0, 0, 0, 0, 0];
                  $.each(res.data, function (index, item) {
                    if (item.uyear < 1) {
                      tnum[0] += item.num;
                    } else if (item.uyear >= 1 && item.uyear < 3) {
                      tnum[1] += item.num;
                    } else if (item.uyear >= 3 && item.uyear < 5) {
                      tnum[2] += item.num;
                    } else if (item.uyear >= 5 && item.uyear < 10) {
                      tnum[3] += item.num;
                    } else if (item.uyear >= 10) {
                      tnum[4] += item.num;
                    }
                  });
                  $.each(op.ldata, function (i2, e2) {
                    op.sdata.push({ value: tnum[i2], name: e2 });
                    op.table.push({
                      name: e2,
                      num: tnum[i2],
                      bfb: (tnum[i2] / res.count * 100).toFixed(2),
                    });
                  });
                  //展示已知数据
                  table.render({
                    elem: '#pageTable'
                    , totalRow: true
                    , cols: [[
                      { type: 'numbers', title: '序号' }
                      , { field: 'name', title: '入职年限', totalRowText: '人数合计' }
                      , { field: 'num', title: '人数', totalRow: '{{= parseInt(d.TOTAL_NUMS) }}' }
                      , { field: 'bfb', title: '占比(%)' }
                    ]]
                    , data: op.table ? op.table : []
                  });
                  break;
              }
              if (op.ldata) {
                var color = [
                  new echarts.graphic.LinearGradient(0, 0, 1, 0, [{ offset: 0, color: '#39b54a', }, { offset: 1, color: '#8dc63f', }]),
                  new echarts.graphic.LinearGradient(0, 0, 1, 0, [{ offset: 0, color: '#0081ff', }, { offset: 1, color: '#1cbbb4', }]),
                  new echarts.graphic.LinearGradient(0, 0, 1, 0, [{ offset: 0, color: '#f43f3b', }, { offset: 1, color: '#ec008c', }]),
                  new echarts.graphic.LinearGradient(0, 0, 1, 0, [{ offset: 0, color: '#ff9700', }, { offset: 1, color: '#ed1c24', }]),
                  new echarts.graphic.LinearGradient(0, 0, 1, 0, [{ offset: 0, color: '#9000ff', }, { offset: 1, color: '#5e00ff', }]),
                  new echarts.graphic.LinearGradient(0, 0, 1, 0, [{ offset: 0, color: '#ec008c', }, { offset: 1, color: '#6739b6', }]),
                  new echarts.graphic.LinearGradient(0, 0, 1, 0, [{ offset: 0, color: '#ff960e', }, { offset: 1, color: '#f9d12f', }]),
                  new echarts.graphic.LinearGradient(0, 0, 1, 0, [{ offset: 0, color: '#47b6ea', }, { offset: 1, color: '#00ffcf', }]),
                  new echarts.graphic.LinearGradient(0, 0, 1, 0, [{ offset: 0, color: '#5f7ff2', }, { offset: 1, color: '#7ba6ff', }]),
                  new echarts.graphic.LinearGradient(0, 0, 1, 0, [{ offset: 0, color: '#fb6666', }, { offset: 1, color: '#ff960e', }]),
                ]

                //图表开始
                var option = {
                  color: color,
                  title: {
                    text: op.title,
                    x: 'center'
                  },
                  tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                  },
                  legend: {
                    orient: 'vertical',
                    left: 'left',
                    data: op.ldata
                  },
                  series: [
                    {
                      name: op.sname,
                      type: 'pie',
                      radius: '55%',
                      center: ['50%', '60%'],
                      data: op.sdata,
                      itemStyle: {
                        emphasis: {
                          shadowBlur: 10,
                          shadowOffsetX: 0,
                          shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                      }
                    }
                  ]
                };
                var myChart = echarts.init(document.getElementById('analyse_echarts'));
                myChart.setOption(option);
              }
            }
          });
        }

        $('select[name=analtype]').val(1);
        chart('部门',1);
        form.render('select');
      });
    });
  </script>
</body>

</html>